export default function({ Button }) {
	// 区域配置对象，非必要
	const param = {
		// 全局定义每个元素默认占据的快递
		// 容器整宽为24，非必要，默认为8
		span: 12,
		// 回显初始值
		initialValues: {
			name: '王小明'
		}
	};
	// 根据不同环境下的ui组件特点，属性的配置具有较大差异
	// 实际研发过程中，应根据各种ui的特点，灵活使用各自属性
	// 以下的嵌套节点，默认均会渲染，可根据实际情况控制哪些需要移除渲染
	if (env === 'react-antd') {
		// react 环境中区域渲染，完整的嵌套结构 
		// ant-form -> ant-card -> jiess-space -> jiess-sapce-item -> ant-form-item -> 核心元素

		// ant-form的控制：
		// 配置对象param中定义formParam配置对象
		// 也可以通过hasForm:false，移除对form的渲染

		// ant-card的控制：
		// 配置对象param中的非特殊属性，默认为card的属性
		// 也可以通过hasCard:false，移除对card的渲染

		// jiess-space的控制：
		// 配置对象param中定义spaceParam配置对象
		// 也可以通过hasSpace:false，移除对space的渲染

		// jiess-sapce-item的控制：
		// 元素配置对象中定义$spaceParamItem配置对象
		// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染

		// ant-form-item的控制：
		// 元素配置对象中定义$formItem配置对象
		// 也可以通过$hasFormItem:false，移除对form-item的渲染

		// $brother的使用：
		// 元素配置对象中定义$brother配置数组
		// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
		// 类似于 [核心元素, ...$brother]

		// 区域标题：建议使用card的标题能力，移除card则没有card标题
		// label标题：改功能属于form-item，移除form-item则没有label

		param.title = '区域标题';
	} else if (env === 'vue2-element') {
		// vue2 环境中区域渲染，完整的嵌套结构 
		// el-form -> el-card -> jiess-space -> jiess-sapce-item -> el-form-item -> 核心元素

		// el-form的控制：
		// 配置对象param中定义formParam配置对象
		// 也可以通过hasForm:false，移除对form的渲染

		// el-card的控制：
		// 配置对象param中的非特殊属性，默认为card的属性
		// 也可以通过hasCard:false，移除对card的渲染

		// jiess-space的控制：
		// 配置对象param中定义spaceParam配置对象
		// 也可以通过hasSpace:false，移除对space的渲染

		// jiess-sapce-item的控制：
		// 元素配置对象中定义$spaceParamItem配置对象
		// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染

		// el-form-item的控制：
		// 元素配置对象中定义$formItem配置对象
		// 也可以通过$hasFormItem:false，移除对form-item的渲染

		// $brother的使用：
		// 元素配置对象中定义$brother配置数组
		// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
		// 类似于 [核心元素, ...$brother]

		// 区域标题：建议使用card的标题能力，移除card则没有card标题
		// label标题：改功能属于form-item，移除form-item则没有label


		param.header = '区域标题';
	} else if (env === 'vue3-element') {
		// vue3 环境中区域渲染，完整的嵌套结构 
		// el-form -> el-card -> jiess-space -> jiess-sapce-item -> el-form-item -> 核心元素

		// el-form的控制：
		// 配置对象param中定义formParam配置对象
		// 也可以通过hasForm:false，移除对form的渲染

		// el-card的控制：
		// 配置对象param中的非特殊属性，默认为card的属性
		// 也可以通过hasCard:false，移除对card的渲染

		// jiess-space的控制：
		// 配置对象param中定义spaceParam配置对象
		// 也可以通过hasSpace:false，移除对space的渲染

		// jiess-sapce-item的控制：
		// 元素配置对象中定义$spaceParamItem配置对象
		// 也可以通过$hasSpaceItem:false，移除对sapce-item的渲染

		// el-form-item的控制：
		// 元素配置对象中定义$formItem配置对象
		// 也可以通过$hasFormItem:false，移除对form-item的渲染

		// $brother的使用：
		// 元素配置对象中定义$brother配置数组
		// 该数组由多个元素构成，与核心元素构成兄弟关系，并置于核心元素后面
		// 类似于 [核心元素, ...$brother]

		// 区域标题：建议使用card的标题能力，移除card则没有card标题
		// label标题：改功能属于form-item，移除form-item则没有label


		param.header = '区域标题';
	}
	// 每个area对象，对应着一块区域的渲染
	const area = this.area(param);
	// 每一次的add会构建一个单独
	area.add(
		$Input({
			// $name为表单唯一标识，为必要属性
			// 决定表单回显，内容输入和数据提取
			$name: 'name',
			// 定义每个元素的label标题，非必要
			$label: '姓名',
			// 定义该表单数据是否必要，非必要
			$rules: ['required'],
		}),
		$InputNumber({
			$name: 'age',
			$label: '年龄',
		})
	);
	// 元素添加完毕，确定渲染
	const action = area.done();
	// 区域数据的操作
	this.add(
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				await action.setFieldValue('name', '坤坤');
			}
		}, '设置name的值'),
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				await action.setFieldsValue({ name: '坤坤' });
			}
		}, '设置区域的值'),
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				const name = await action.getFieldValue('name');
				alert(name);
			}
		}, '获取name的值'),
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				const values = await action.getFieldsValue();
				alert(JSON.stringify(values));
			}
		}, '获取区域的值'),
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				const values = await action.validateFields();
				alert(JSON.stringify(values));
			}
		}, '校验并获取数据'),
		this.render({
			is: Button,
			type: 'primary',
			onClick: async () => {
				await action.resetFields();
			}
		}, '重置区域数据')
	);
}